﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
    ViewData["Title"] = "采购入库管理";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>采购入库管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes">
    <link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 响应式布局优化 */
        body {
            font-size: 14px;
            min-width: 320px;
        }

        /* 卡片容器响应式 */
        .layui-card {
            margin: 10px !important;
            overflow-x: auto;
        }

        /* 头部按钮组响应式 */
        .layui-card-header .layui-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }

        .layui-card-header .layui-col-md6:first-child {
            flex: 1;
            min-width: 200px;
        }

        .layui-card-header .layui-col-md6:last-child {
            flex-shrink: 0;
            text-align: right;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        /* 搜索表单优化 */
        .search-container {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
        }

        .search-title {
            font-size: 16px;
            font-weight: 500;
            color: #495057;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .search-title::before {
            content: "🔍";
            font-size: 14px;
        }

        .search-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 15px;
            align-items: center;
        }

        .search-item {
            display: flex;
            align-items: center;
            min-width: 250px;
            flex: 1;
        }

        .search-item .layui-form-label {
            width: 90px;
            padding: 0 12px 0 0;
            color: #495057;
            font-weight: 500;
            white-space: nowrap;
            text-align: right;
            background: none;
            border: none;
            line-height: 1;
        }

        .search-item .layui-input-inline {
            flex: 1;
        }

        .search-item .layui-input {
            border: 1px solid #ced4da;
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 14px;
            transition: all 0.2s ease;
            background: #fff;
        }

        .search-item .layui-input:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
            outline: none;
        }

        .search-buttons {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            align-items: center;
            margin-top: 10px;
            padding-top: 15px;
            border-top: 1px solid #e9ecef;
        }

        .search-btn {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 20px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .search-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
        }

        .reset-btn {
            background: #6c757d;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .reset-btn:hover {
            background: #5a6268;
        }

        /* 覆盖Layui默认样式 */
        .search-container .layui-form .layui-form-label {
            float: none !important;
            display: block !important;
        }

        .search-container .layui-input-inline {
            display: block !important;
            margin-left: 0 !important;
        }

        /* 确保按钮样式不被覆盖 */
        .search-btn.layui-btn {
            background: linear-gradient(135deg, #007bff, #0056b3) !important;
            border: none !important;
        }

        .reset-btn.layui-btn {
            background: #6c757d !important;
            border: none !important;
        }

        /* 表格容器响应式 */
        .table-container {
            overflow-x: auto;
            min-height: 400px;
        }

        /* 按钮响应式优化 */
        .layui-btn {
            margin: 2px;
            font-size: 12px;
            padding: 0 12px;
            height: 32px;
            line-height: 32px;
            white-space: nowrap;
            min-width: auto;
        }

        /* 小屏幕适配 */
        @@media (max-width: 768px) {
            .layui-card {
                margin: 5px !important;
                font-size: 12px;
            }

            .layui-card-header h2 {
                font-size: 16px;
                margin: 0;
            }

            .layui-card-header .layui-row {
                flex-direction: column;
                align-items: stretch;
                gap: 15px;
            }

            .layui-card-header .layui-col-md6 {
                text-align: center !important;
            }

            .layui-card-header .layui-col-md6:last-child {
                justify-content: center;
            }

            /* 搜索表单小屏幕适配 */
            .search-container {
                padding: 15px;
            }

            .search-title {
                font-size: 14px;
                margin-bottom: 12px;
            }

            .search-row {
                flex-direction: column;
                gap: 12px;
            }

            .search-item {
                min-width: auto;
                flex-direction: column;
                align-items: stretch;
            }

            .search-item .layui-form-label {
                width: 100%;
                text-align: left;
                padding: 0 0 5px 0;
                font-size: 13px;
            }

            .search-item .layui-input-inline {
                width: 100%;
            }

            .search-item .layui-input {
                padding: 10px 12px;
                font-size: 14px;
            }

            .search-buttons {
                justify-content: stretch;
                gap: 8px;
            }

            .search-btn, .reset-btn {
                flex: 1;
                justify-content: center;
                padding: 10px 15px;
            }

            .layui-btn {
                font-size: 11px;
                padding: 0 8px;
                height: 28px;
                line-height: 28px;
            }

            /* 表格在小屏幕下的优化 */
            .layui-table-view {
                font-size: 11px;
            }

            .layui-table th,
            .layui-table td {
                padding: 5px 8px;
                font-size: 11px;
            }
        }

        /* 超小屏幕适配 */
        @@media (max-width: 480px) {
            .layui-card {
                margin: 2px !important;
                font-size: 11px;
            }

            .layui-btn {
                font-size: 10px;
                padding: 0 6px;
                height: 26px;
                line-height: 26px;
            }

            /* 搜索表单超小屏幕适配 */
            .search-container {
                padding: 12px;
                margin-bottom: 15px;
            }

            .search-title {
                font-size: 13px;
                margin-bottom: 10px;
            }

            .search-row {
                gap: 8px;
            }

            .search-item .layui-form-label {
                font-size: 12px;
                padding: 0 0 4px 0;
            }

            .search-item .layui-input {
                padding: 8px 10px;
                font-size: 13px;
            }

            .search-buttons {
                margin-top: 8px;
                padding-top: 12px;
            }

            .search-btn, .reset-btn {
                padding: 8px 12px;
                font-size: 13px;
            }

            .layui-table-view {
                font-size: 10px;
            }

            .layui-table th,
            .layui-table td {
                padding: 3px 5px;
                font-size: 10px;
            }
        }

        /* 确保按钮可点击区域足够大 */
        .layui-btn,
        .layui-table .layui-btn {
            min-height: 28px;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        /* 表格操作列优化 */
        .layui-table-view .layui-table-fixed-r {
            z-index: 999;
        }

        /* 确保固定列在小屏幕下也能正常显示 */
        @@media (max-width: 768px) {
            .layui-table-view .layui-table-fixed-r {
                right: 0 !important;
            }
        }

        /* 增强触摸设备的用户体验 */
        @@media (pointer: coarse) {
            .layui-btn, 
            .layui-form-checkbox, 
            .layui-form-radio,
            .layui-table input[type="checkbox"] {
                min-height: 32px;
                min-width: 32px;
            }
        }

        /* 操作按钮组优化 */
        .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
            justify-content: center;
        }

        .btn-group .layui-btn {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 0 6px;
        }

        .btn-group .layui-btn .layui-icon {
            font-size: 12px;
        }

        /* 小屏幕下操作按钮优化 */
        @@media (max-width: 768px) {
            .btn-group .btn-text {
                display: none;
            }
            
            .btn-group .layui-btn {
                padding: 0 4px;
                min-width: 24px;
                height: 24px;
                line-height: 24px;
            }
            
            .btn-group .layui-btn .layui-icon {
                font-size: 14px;
            }
        }

        @@media (max-width: 480px) {
            .btn-group {
                flex-direction: column;
                gap: 1px;
            }
            
            .btn-group .layui-btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>

<div class="layui-card" style="margin:20px;">
    <div class="layui-card-header">
        <div class="layui-row">
            <div class="layui-col-md6">
                <h2>采购入库管理</h2>
            </div>
            <div class="layui-col-md6" style="text-align: right;">
                <button class="layui-btn layui-btn-danger" id="btnBatchDelete">
                    <i class="layui-icon">&#xe640;</i> 批量删除
                </button>
                <button class="layui-btn" id="btnAdd">
                    <i class="layui-icon">&#xe654;</i> 新增采购入库
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <!-- 搜索栏 -->
        <div class="search-container">
            <div class="search-title">筛选条件</div>
            <form class="layui-form" lay-filter="searchForm">
                <div class="search-row">
                    <div class="search-item">
                        <label class="layui-form-label">入库单编号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="LnboundCode" placeholder="请输入入库单编号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="search-item">
                        <label class="layui-form-label">入库单名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="LnboundName" placeholder="请输入入库单名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="search-item">
                        <label class="layui-form-label">供应商</label>
                        <div class="layui-input-inline">
                            <input type="text" name="Vendor" placeholder="请输入供应商" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="search-row">
                    <div class="search-item">
                        <label class="layui-form-label">采购单号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ProcurementNumber" placeholder="请输入采购入库单号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="search-item">
                        <label class="layui-form-label">入库日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="LnboundDate" id="dateSearch" placeholder="请选择入库日期" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="search-item" style="min-width: auto;">
                        <!-- 占位空间 -->
                    </div>
                </div>
                <div class="search-buttons">
                    <button type="reset" class="reset-btn">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                    <button class="search-btn" lay-submit lay-filter="searchBtn">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                </div>
            </form>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <table id="procurementTable" lay-filter="procurementTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="tableBar">
    {{#  if(d.documentStatus == 0){ }}
        <div class="btn-group" style="display: flex; flex-wrap: wrap; gap: 2px;">
            <a class="layui-btn layui-btn-xs" lay-event="edit" title="修改">
                <i class="layui-icon layui-icon-edit"></i>
                <span class="btn-text">修改</span>
            </a>
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="execute" title="执行入库">
                <i class="layui-icon layui-icon-play"></i>
                <span class="btn-text">执行</span>
            </a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除">
                <i class="layui-icon layui-icon-delete"></i>
                <span class="btn-text">删除</span>
            </a>
        </div>
    {{#  } else { }}
        <span style="color: #999;">已完成</span>
    {{#  } }}
</script>

<!-- 状态显示模板 -->
<script type="text/html" id="statusTpl">
    {{#  if(d.documentStatus == 0){ }}
        <span class="layui-badge layui-bg-orange">草稿</span>
    {{#  } else if(d.documentStatus == 1) { }}
        <span class="layui-badge layui-bg-green">已完成</span>
    {{#  } }}
</script>

<script>
layui.use(['table', 'form', 'layer', 'laydate'], function () {
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var $ = layui.$;

    // 初始化日期选择器
    laydate.render({
        elem: '#dateSearch',
        type: 'date'
    });

    // 响应式表格配置
    function getTableConfig() {
        var screenWidth = $(window).width();
        var cols = [];
        
        if (screenWidth <= 480) {
            // 超小屏幕：只显示关键列
            cols = [[
                {type:'checkbox', width: 50, templet: function(d){
                    if(d.documentStatus == 0){
                        return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" data-id="' + d.id + '">';
                    } else {
                        return '';
                    }
                }},
                {field: 'lnboundCode', title: '入库单编号', minWidth: 100},
                {field: 'vendor', title: '供应商', width: 80},
                {field: 'documentStatus', title: '状态', width: 70, templet: '#statusTpl'},
                {title: '操作', toolbar: '#tableBar', width: 120, fixed: 'right'}
            ]];
        } else if (screenWidth <= 768) {
            // 小屏幕：显示部分列
            cols = [[
                {type:'checkbox', width: 50, templet: function(d){
                    if(d.documentStatus == 0){
                        return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" data-id="' + d.id + '">';
                    } else {
                        return '';
                    }
                }},
                {field: 'lnboundCode', title: '入库单编号', minWidth: 120},
                {field: 'lnboundName', title: '入库单名称', minWidth: 120},
                {field: 'vendor', title: '供应商', width: 100},
                {field: 'documentStatus', title: '状态', width: 80, templet: '#statusTpl'},
                {title: '操作', toolbar: '#tableBar', width: 150, fixed: 'right'}
            ]];
        } else {
            // 大屏幕：显示所有列
            cols = [[
                {type:'checkbox', width: 50, templet: function(d){
                    if(d.documentStatus == 0){
                        return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" data-id="' + d.id + '">';
                    } else {
                        return '';
                    }
                }},
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'lnboundCode', title: '入库单编号', width: 150},
                {field: 'lnboundName', title: '入库单名称', width: 150},
                {field: 'procurementNumber', title: '采购入库单号', width: 150},
                {field: 'vendor', title: '供应商', width: 120},
                {field: 'lnboundWarehouse', title: '入库仓库', width: 120},
                {field: 'lnboundDate', title: '入库日期', width: 120, templet: function(d){
                    if(d.lnboundDate) {
                        return new Date(d.lnboundDate).toLocaleDateString();
                    }
                    return '';
                }},
                {field: 'documentStatus', title: '单据状态', width: 100, templet: '#statusTpl'},
                {field: 'totalAmount', title: '总金额', width: 100},
                {field: 'pemark', title: '备注', width: 150, templet: function(d){
                    if(d.pemark && d.pemark.length > 20) {
                        return d.pemark.substring(0, 20) + '...';
                    }
                    return d.pemark || '';
                }},
                {title: '操作', toolbar: '#tableBar', width: 200, fixed: 'right'}
            ]];
        }
        
        return {
            elem: '#procurementTable',
            url: '/WarehouseManagement/QueryProcurement',
            method: 'post',
            contentType: 'application/json',
            page: true,
            height: 'full-220',
            cellMinWidth: 80,
            where: {
                page: 1,
                limit: 10,
                LnboundCode: '',
                LnboundName: '',
                Vendor: '',
                ProcurementNumber: '',
                LnboundDate: null
            },
            request: {
                pageName: 'page',
                limitName: 'limit'
            },
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'msg',
                countName: 'count',
                dataName: 'data'
            },
            cols: cols
        };
    }

    // 初始化表格
    table.render(getTableConfig());

    // 窗口大小改变时重新渲染表格
    $(window).resize(function() {
        table.render(getTableConfig());
    });

    // 搜索按钮点击事件
    form.on('submit(searchBtn)', function(data){
        var formData = data.field;
        // 转换日期格式
        if(formData.LnboundDate) {
            formData.LnboundDate = new Date(formData.LnboundDate).toISOString();
        }
        
        table.reload('procurementTable', {
            where: Object.assign({
                page: 1,
                limit: 10
            }, formData)
        });
        return false;
    });

    // 重置按钮点击事件
    $('.reset-btn').on('click', function() {
        // 清空表单
        $('input[name="LnboundCode"]').val('');
        $('input[name="LnboundName"]').val('');
        $('input[name="Vendor"]').val('');
        $('input[name="ProcurementNumber"]').val('');
        $('input[name="LnboundDate"]').val('');
        
        // 重新加载表格，使用空的搜索条件
        table.reload('procurementTable', {
            where: {
                page: 1,
                limit: 10,
                LnboundCode: '',
                LnboundName: '',
                Vendor: '',
                ProcurementNumber: '',
                LnboundDate: null
            }
        });
        
        return false;
    });

    // 新增按钮点击事件
    $('#btnAdd').on('click', function(){
        // 跳转到新增页面
        window.location.href = '/WarehouseManagement/CreateProcurementView';
    });

    // 批量删除按钮点击事件
    $('#btnBatchDelete').on('click', function(){
        var checkStatus = table.checkStatus('procurementTable');
        var data = checkStatus.data;
        
        if(data.length === 0){
            layer.msg('请选择要删除的数据');
            return;
        }
        
        // 检查是否有已完成状态的记录
        var completedItems = [];
        var draftItems = [];
        for(var i = 0; i < data.length; i++){
            if(data[i].documentStatus == 1){
                completedItems.push(data[i]);
            } else {
                draftItems.push(data[i]);
            }
        }
        
        if(completedItems.length > 0){
            layer.msg('已完成状态的记录不能删除，请重新选择', {icon: 2});
            return;
        }
        
        layer.confirm('确定要删除选中的 ' + draftItems.length + ' 条草稿记录吗？', function(index){
            var ids = [];
            for(var i = 0; i < draftItems.length; i++){
                ids.push(draftItems[i].id);
            }
            
            // 发送删除请求
            $.ajax({
                url: '/WarehouseManagement/BatchDeleteProcurement',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(ids),
                success: function(result){
                    if(result.success){
                        layer.msg('删除成功');
                        table.reload('procurementTable');
                    } else {
                        layer.msg('删除失败：' + result.message);
                    }
                },
                error: function(){
                    layer.msg('删除失败');
                }
            });
            
            layer.close(index);
        });
    });

    // 监听行工具事件
    table.on('tool(procurementTable)', function(obj){
        var data = obj.data;
        
        if(obj.event === 'edit'){
            // 跳转到修改页面，带上ID参数
            window.location.href = '/WarehouseManagement/UpdateProcurementView?id=' + data.id;
        } else if(obj.event === 'execute'){
            // 执行入库操作
            layer.confirm('确定要执行入库操作吗？<br><span style="color: #ff5722;">执行后单据状态将变为已完成，无法再次修改！</span>', {
                icon: 3,
                title: '确认执行入库',
                area: ['350px', '180px']
            }, function(index){
                var loading = layer.load(2, {
                    content: '正在执行入库操作...',
                    time: 30*1000
                });
                
                // 调用执行入库接口
                $.ajax({
                    url: '/WarehouseManagement/GetProcurementStatus',
                    type: 'PUT',
                    data: { id: data.id },
                    success: function(result){
                        layer.close(loading);
                        if(result.success){
                            layer.msg('入库执行成功！', {
                                icon: 1,
                                time: 2000
                            }, function(){
                                // 刷新表格数据
                                table.reload('procurementTable');
                            });
                        } else {
                            layer.msg('入库执行失败：' + (result.message || '未知错误'), {
                                icon: 2,
                                time: 3000
                            });
                        }
                    },
                    error: function(xhr, status, error){
                        layer.close(loading);
                        layer.msg('入库执行失败：网络错误', {
                            icon: 2,
                            time: 3000
                        });
                        console.error('执行入库失败:', error);
                    }
                });
                
                layer.close(index);
            });
        } else if(obj.event === 'del'){
            layer.confirm('确定要删除这条数据吗？', function(index){
                // 发送删除请求
                $.ajax({
                    url: '/WarehouseManagement/BatchDeleteProcurement',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify([data.id]),
                    success: function(result){
                        if(result.success){
                            layer.msg('删除成功');
                            obj.del();
                        } else {
                            layer.msg('删除失败：' + result.message);
                        }
                    },
                    error: function(){
                        layer.msg('删除失败');
                    }
                });
                
                layer.close(index);
            });
        }
    });
});
</script>

</body>
</html>
